import { Spin } from 'antd';
import { connect } from 'dva';
import React, { useEffect, useState } from 'react';
import AboutUs from '../about/index';
import Board from '../board/index';
import BusinessCooperation from '../businessCooperation/index';
import CasePresent from '../casePresent/index';
import ContactUs from '../contactUs/index';
import MemberInformation from '../memberInformation/index';
import NewsCenter from '../newsCenter/index';
import ProductShow from '../productShow/index';
import Detail from '../Detail/index';
import styles from './components.less';

const content = props => {
  const [loading, setLoading] = useState(false)
  const [list, setList] = useState([
    { url: "/home", sort: 0, compontent: <Board {...props} id="1601960177483882498" /> },
    { url: "/aboutUs", sort: 1, compontent: <AboutUs {...props} id="1601960380031016961" /> },
    { url: "/businessCooperation", sort: 2, compontent: <BusinessCooperation {...props} id="1601033680597958658" /> },
    { url: "/casePresent", sort: 3, compontent: <CasePresent {...props} id="1601056978908164098" /> },
    { url: "/newsCenter", sort: 4, compontent: <NewsCenter {...props} id="1601057032729473026" /> },
    { url: "/productDisplay", sort: 5, compontent: <ProductShow {...props} id="1602556572083560449" /> }, //1602556572083560449
    { url: "/memberInformation", sort: 6, compontent: <MemberInformation {...props} id="1601960646356738050" /> },
    { url: "/contactUs", sort: 7, compontent: <ContactUs {...props} id="1601960695790804994" /> },
    { url: ``, sort: 7, compontent: <Detail {...props} /> },
  ])
  const [url, setUrl] = useState('')
  useEffect(() => {
    setUrl(props.location?.pathname)
  }, [])
  useEffect(() => {
    if (props.location?.pathname != url && list.length > 0 && !url) {
      let _list = list
      _list[_list.length - 1].url = `${props.location?.pathname}/detail`
      setList(_list)
    }
  }, [url])
  return (
    <section className={styles.container}>
      {
        !loading ?
          list.map(i => {
            if (props.location?.pathname == i.url) {
              return i.compontent
            } else {
              return null
            }
          }) :
          <div style={{ width: '100%', flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <Spin loading={loading} /></div>
        // null
      }
    </section>
  );
};
export default connect(({ Public }) => ({
  setTing: Public.setTing
}))(content);
